import React, { useState, useEffect } from 'react'
import "./style.less"
import { useHistory, useParams } from "react-router-dom"


export default function SearchInput () {

  const history = useHistory();
  const params = useParams();
  const [search, setSearch] = useState("")

  function onKeyUpHandle (e) {
    // console.log(111);
    // console.log(e.keyCode);
    if (e.keyCode === 13) {
      console.log(typeof search);
      if (search !== "") {
        // console.log(document.body.scrollTop);
        document.documentElement.scrollTop = document.body.scrollTop = 0;
        history.push("/search/" + search)
      }
    }
  }

  function onChangeHandle (e) {
    setSearch(e.target.value)
  }

  useEffect(() => {
    setSearch(params.keywords || "")
  }, [params.keywords])


  return (
    <input
      className="search-input"
      placeholder="搜索您想住的区域或小区"
      type="search"
      onKeyUp={onKeyUpHandle}
      value={search}
      onChange={onChangeHandle}
    />
  )
}
